<template>
  <div class="points-detail-page">
    <!-- 顶部导航栏 -->
    <van-nav-bar
        title="邻里社区积分商城"
        class="custom-nav"
    />

    <!-- 积分信息区域 -->
    <div class="points-info">
      <!-- 返回商城按钮 -->
      <div class="my-points">
        <!-- 返回商城按钮 -->
        <i @click="backMallMacket" class="fas fa-arrow-left"></i>
        <span >返回商城</span>
        <van-icon name="coins" color="#fff" size="20" />
        <i class="fas fa-coins"></i>
        <span class="points-text">我的积分: {{data.user.points}}</span>
      </div>
      <van-button
          @click="goToPointsPlan"
          round
          type="info"
          size="small"
          class="task-btn"
      >
        积分任务
      </van-button>
    </div>


    <!-- 积分明细标题 -->
    <div class="detail-title">
      <van-icon name="list" color="#64b5f6" />
      <span>积分明细</span>
    </div>

    <!-- 积分总额和筛选 -->
    <div class="summary-filter">
      <van-tabs v-model="data.activeTab" class="filter-tabs" @change="handleTabChange">
        <van-tab  title="全部" name="0" />
        <van-tab title="获取" name="1" />
        <van-tab  title="消耗" name="2" />
      </van-tabs>
    </div>

    <!-- 积分明细列表 -->
    <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
    >
      <van-grid :border="true" :column-num="1" class="grid">
        <van-grid-item v-for="item in data.pointsRecord">
          <div class="points-and-exchange">
            <span style="margin-top: 5px">{{item.description}}</span>
            <span style="color: orange;margin-top: 2px"> {{ item.type == 1 ? '+' : '-' }}{{ item.amount }}</span>
          </div>
          <div>
            <p>{{formatDateTime(item.createdAt)}}</p>
          </div>
        </van-grid-item>
      </van-grid>
    </van-list>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, reactive, onMounted } from 'vue';
import {useRoute} from "vue-router";
import {useRouter} from "vue-router";
import axios from "@/utils/axios";

const route = useRoute();
const router = useRouter();
const userId = route.query.uid;
const data = reactive({
  user: {
    userId: 0,
    phone: '',
    originalpwd: '',
    password: '',
    salt: '',
    repwdTimes: 0,
    nickname: '',
    avatar: '',
    building: '',
    unit: '',
    room: '',
    points: 0,
    createdAt: '',
    updatedAt: '',
    status: 0
  },
  pointsRecord: [{
    userId: 0,
    type: 1,
    amount: 0,
    sourceType: 1,
    sourceId: 0,
    description: '',
    createdAt: ''
  }],
  originalRecords: [{
    userId: 0,
    type: 1,
    amount: 0,
    sourceType: 1,
    sourceId: 0,
    description: '',
    createdAt: ''
  }],
  activeTab:"0",
})
// 时间格式化函数：将ISO格式转换为yyyy-MM-dd HH:mm:ss
const formatDateTime = (dateString: string) => {
  if (!dateString) return '';

  const date = new Date(dateString);

  // 获取年月日
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');

  // 获取时分秒
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');
  const seconds = String(date.getSeconds()).padStart(2, '0');

  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
};
const handleTabChange = (value) => {
  data.activeTab = value;
  console.log(data.activeTab)
  switch (data.activeTab){
    case '0':
      data.pointsRecord = [...data.originalRecords]
      break;
    case '1':
      data.pointsRecord = data.originalRecords.filter(item => item.type === 1);
      break;
    case '2':
      data.pointsRecord = data.originalRecords.filter(item => item.type === 2);
      break;
  }
  console.log("对应的记录数据: ", data.pointsRecord);
}
const init = () => {

  console.log("用户Id: ", userId);
  axios.get(`/api/users/getOneUsers/${userId}`)
      .then(res => {
        if (res.code == 200){
          console.log("用户数据: ", res.data);
          data.user = res.data;
        }
      })
  axios.get(`/api/pointsRecords/pointsRecord/${userId}`)
      .then(res => {
        if (res.code == 200){
          console.log("用户积分记录数据: ", res.data);
          data.pointsRecord = res.data;
          data.originalRecords = [...res.data]; // 保存原始数据副本
        }
      })
}
onMounted(() => {
  init();
})
const backMallMacket = () => {
  router.push('/pointMarket')
}
const goToPointsPlan = () => {
  router.push({name: "pointsPlan", query: {uid: userId}})
}

</script>

<style scoped>
.points-detail-page {
  background-color: #f5f7fa;
  min-height: 100vh;
}

.custom-nav {
  background: linear-gradient(to right, #6200ee, #2196f3);
}
.back-button{
  display: inline-flex;
  align-items: center;
  padding: 10px 15px;
  margin-bottom: 20px;
  cursor: pointer;
  color: #3498db;
  font-weight: 600;
  border-radius: 5px;
  transition: background 0.3s ease;
}
.points-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: linear-gradient(to right, #6200ee, #2196f3);
  color: white;
}

.my-points {
  display: flex;
  align-items: center;
  gap: 8px;
}

.points-text {
  font-size: 18px;
  font-weight: bold;
}

.task-btn {
  background-color: rgba(255, 255, 255, 0.3);
  border-color: white;
  color: white;
}

.back-btn {
  margin: 16px;
  width: auto;
}

.detail-title {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px;
  font-size: 18px;
  font-weight: bold;
  border-bottom: 1px solid #eee;
  background-color: white;
}

.summary-filter {
  padding: 16px;
  background-color: white;
  margin-bottom: 10px;
}

.total-points {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.total-number {
  font-size: 24px;
  font-weight: bold;
  color: #ff9800;
}

.filter-tabs {
  --tab-active-color: #2196f3;
}
</style>
